<template>
  <el-card>
    <el-input class="width200" placeholder="名称" v-model="name" clearable></el-input>
    <el-button type="primary" @click="searchList()">查询消息</el-button>
    <el-button type="primary" @click="showGood()">新增消息</el-button>
    <!-- <el-button type="primary" @click="updateGood()">更新消息</el-button> -->
    <el-button type="primary" @click="deleteAllGood()">删除所有</el-button>
    <el-table :data="tableData" stripe border style="margin-top: 20px">
      <el-table-column prop="_id" label="id">
      </el-table-column>
      <el-table-column prop="nickname" label="昵称">
      </el-table-column>
      <el-table-column prop="user_id" label="uid">
      </el-table-column>
      <el-table-column prop="type" label="类型">
      </el-table-column>
      <el-table-column prop="msg" label="内容">
      </el-table-column>
      <el-table-column prop="amount" label="积分">
      </el-table-column>
      <el-table-column prop="_add_time_str" label="创建时间">
      </el-table-column>
      <el-table-column  label="状态">
        <template slot-scope="scope">
          <span>{{ scope.row.status == 1? '未读': '已读' }}</span>
        </template>
      </el-table-column>
      <el-table-column  label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <el-dialog :visible.sync="isCoupon" :close-on-click-modal="true" width="60%">
      <el-form ref="form" :model="message" label-width="80px">
        <el-form-item label="内容">
          <el-input class="width400" v-model="message.msg"></el-input>
        </el-form-item>
        <el-form-item label="积分">
          <el-input class="width400" v-model="message.amount"></el-input>
        </el-form-item>
        <el-form-item label="接收人">
          <vk-data-input-select v-model="message.type" class="width400" :localdata='typeList'
           placeholder="请选择类型"></vk-data-input-select>
        </el-form-item>
        <el-form-item label="接收人">
          <vk-data-input-select v-model="message.user_id" class="width400" :localdata='userArr' multiple
            :props="{value: '_id', label: 'nickname'}" placeholder="请选择"></vk-data-input-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">更新</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-card>
</template>

<script>
  export default {
    data() {
      return {
        name: '',
        message: {
          msg: '',
          amount: '',
          user_id: [],
          type: ''
        },
        currentPage: 1,
        pageNum: 1,
        pageSize: 100,
        total: 0,
        isCoupon: false,
        tableData: [],
        userArr: [],
        typeList: [
          //  返利积分发放  2 系统消息  3 提现审核消息  4订单审核信息
          {
            label: '返利消息',
            value: 1
          },
          {
            label: '系统消息',
            value: 2
          },
          {
            label: '提现审核消息',
            value: 3
          },
          {
            label: '订单审核信息',
            value: 4
          }
        ]
      }
    },
    mounted() {
      this.getList()
      this.getAllUser()
    },
    methods: {
      getAllUser() {
        vk.callFunction({
          url: 'user/kh/userAllget',
          success: (res) => {
            if (res) {
              this.userArr = res.rows
            }
          }
        })
      },
      showGood() {
        this.isCoupon = true
        this.message = {
          msg: '',
          amount: '',
          user_id: []
        }
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageNum = val
        this.getList()
      },
      handleEdit(index, row) {
        this.template = row
        this.isCoupon = true
      },
      handleDelete(index, row) {
        vk.confirm('确定要删除该模版吗', '提示', '确定', '取消', res => {
          if (res.confirm) {
            this.goodDelete(row)
          }
        });
      },
      goodDelete(row) {
        uni.showLoading({
          title: '加载中...'
        })
        let that = this
        
        // 先查询一下是否有关联券包
        vk.callFunction({
          url: 'user/kh/messageDelete',
          data: {
            _id: row._id
          },
          success: (res) => {
            if (res) {
              uni.hideLoading()
              this.getList()
            }
          }
        })
      },
      deleteAllGood() {
        for (let i =0; i < this.tableData.length;i++) {
          vk.callFunction({
            url: 'user/kh/messageDelete',
            data: {
              _id: this.tableData[i]._id
            },
            success: (res) => {
          
            }
          })
        }
      },
      searchList() {
        this.pageNum = 1
        this.getList()
      },
      getList() {
        uni.showLoading({
          title: '加载中...'
        })
        let that = this
        let obj = {}
        if (this.name) {
          obj.name = this.name
        }
        vk.callFunction({
          url: 'user/kh/messageList',
          data: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            ...obj
          },
          success: (res) => {
            if (res) {
              uni.hideLoading()
              this.tableData = res.rows
              this.total = res.total
            }
          }
        })
      },
      updateGood() {
        let arr =[]
        for (let h=0; h < this.tableData.length; h++) {
          for (let k = 0; k < this.userArr.length; k++) {
            if (this.tableData[h].user_id ==this.userArr[k]._id) {
              arr.push(this.userArr[k].nickname)
              console.log(h)
              break
            }
          }
        }
        console.log(arr, 'arr')
        for (let i = 0; i < this.tableData.length; i++) {
          let obj = {
            nickname: arr[i],
            _id: this.tableData[i]._id
          }
          vk.callFunction({
            url: 'user/kh/messagePost',
            data: obj,
          })
        }
      },
      onSubmit() {
        uni.showLoading({
          title: '加载中...'
        })
        let arr =[]
        for (let h=0; h < this.message.user_id.length; h++) {
          for (let k = 0; k < this.userArr.length; k++) {
            if (this.message.user_id[h] ==this.userArr[k]._id) {
              arr.push(this.userArr[k].nickname)
              break
            }
          }
        }
        for (let i = 0; i < this.message.user_id.length; i++) {
          let obj = {
            user_id: this.message.user_id[i],
            nickname: arr[i],
            status: 1,
            msg: this.message.msg,
            amount: this.message.amount
          }
          vk.callFunction({
            url: 'user/kh/messagePost',
            data: obj,
          })
        }
        setTimeout(() => {
           uni.hideLoading()
          this.isCoupon = false
          this.getList()
        }, 3000)
      },
    }
  }
</script>

<style lang="scss" scoped>
  /deep/.el-tabs__new-tab {
    margin-right: 12px !important
  }
.update-img {
  width: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	color: #d5d5de;
  border: 1px solid #ccc;
	&::before {
		line-height: 1;
		font-size: 45px;
		content: "+";
	}
	&::after {
		content: "上传";
		font-size: 12px;
	}
}
.update-txt {
  width: 300px;
  display: inline-block;
  white-space: nowrap;
  	overflow: hidden;
  	text-overflow: ellipsis;
}
  .width400 {
    width: 400px
  }

  .width200 {
    width: 200px
  }
  .width100 {
    width: 100px
  }
  .good {
    display: flex;
    align-items: center;
    margin-top: 10px;
    &-img {
      width: 30px;
      height: 30px;
      border-radius: 4px;
    }
    &-name {
      margin-left: 10px;
    }
    &-price {
      color: #f56c6c;
      font-weight: 500;
      margin-left: 10px;
      margin-right: 10px;
    }
  }
</style>